{% extends "base.html" %}

{% block title %}仪表板{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="text-center mb-5 fade-in">
                <h1 class="display-4 fw-bold">
                    <i class="bi bi-speedometer2 me-3"></i>欢迎，{{ username }}！
                </h1>
                <p class="lead text-muted">欢迎使用安全登录系统</p>
                
                <!-- 管理员提示 -->
                {% if session.user_id == 1 or username == 'admin' %}
                <div class="alert alert-success d-inline-block">
                    <i class="bi bi-shield-check me-2"></i>您拥有管理员权限
                </div>
                {% else %}
                <div class="alert alert-warning d-inline-block">
                    <i class="bi bi-info-circle me-2"></i>您是普通用户，部分功能需要管理员权限才能访问
                </div>
                {% endif %}
            </div>
            
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card text-center h-100 hover-card">
                        <div class="card-body d-flex flex-column justify-content-center">
                            <div class="mb-3">
                                <div class="rounded-circle bg-primary bg-opacity-10 p-4 d-inline-block">
                                    <i class="bi bi-people text-primary fs-1"></i>
                                </div>
                            </div>
                            <h5 class="card-title">用户管理</h5>
                            <p class="card-text text-muted">管理用户账户和权限</p>
                            <a href="#" class="btn btn-outline-primary mt-auto">
                                <i class="bi bi-arrow-right-circle me-1"></i>进入
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="card text-center h-100 hover-card">
                        <div class="card-body d-flex flex-column justify-content-center">
                            <div class="mb-3">
                                <div class="rounded-circle bg-success bg-opacity-10 p-4 d-inline-block">
                                    <i class="bi bi-file-earmark-text text-success fs-1"></i>
                                </div>
                            </div>
                            <h5 class="card-title">登录日志</h5>
                            <p class="card-text text-muted">查看系统登录记录</p>
                            {% if session.user_id == 1 or username == 'admin' %}
                            <a href="{{ url_for('log.list_logs') }}" class="btn btn-outline-success mt-auto">
                                <i class="bi bi-arrow-right-circle me-1"></i>查看日志
                            </a>
                            {% else %}
                            <button class="btn btn-outline-secondary mt-auto" disabled>
                                <i class="bi bi-shield-lock me-1"></i>需要管理员权限
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="card text-center h-100 hover-card">
                        <div class="card-body d-flex flex-column justify-content-center">
                            <div class="mb-3">
                                <div class="rounded-circle bg-info bg-opacity-10 p-4 d-inline-block">
                                    <i class="bi bi-gear text-info fs-1"></i>
                                </div>
                            </div>
                            <h5 class="card-title">系统设置</h5>
                            <p class="card-text text-muted">配置系统参数</p>
                            <a href="#" class="btn btn-outline-info mt-auto">
                                <i class="bi bi-arrow-right-circle me-1"></i>进入
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 管理员功能区域 -->
            {% if session.user_id == 1 or username == 'admin' %}
            <div class="row mt-5">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-tools me-2"></i>管理员工具
                            </h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">作为管理员，您可以访问系统的所有功能，包括查看所有用户的登录日志。</p>
                            <a href="{{ url_for('log.list_logs') }}" class="btn btn-success">
                                <i class="bi bi-file-earmark-text me-1"></i>查看所有登录日志
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 添加卡片悬停效果
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.hover-card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-10px)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    });
</script>
{% endblock %}